<script setup lang="ts">
import { ref, reactive, toRefs, computed, PropType, onMounted, watch, watchEffect, nextTick } from "vue"
import JHead from "@/components/j-head/index.vue"
import { URL_TOKEN_POSITION } from "@/comm/api";
import i18n from "@/locals";
import { useTokens } from '@/stores/tokens';
import { get } from "@/comm/request";
import { formatBigNumber } from "@/comm/format";
import JLoding from "@/components/j-loding/index.vue";
import { useKline } from "@/stores/kline";
import { sortList } from "@/comm/tooler";
import DomDrag from "@/comm/DomDrag";
import { info } from "console";
import { useLayout } from "@/stores/layout";
const tokens = useTokens()
const kline = useKline();
const layout = useLayout();
const isMore = ref(false)
const oldList = ref<any[]>([])
const newList = ref<any[]>([])
const news = ref();
const pageIndex = ref(5)
const emit = defineEmits(["hide"]);
interface Location {
    x: number;
    y: number;
}
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
});

onMounted(() => {
    // DomDrag.setDrag(news.value);
})
watch(() => props.show, (newVal, oldVal) => {
    console.log('监听到show变化', props.show)
    if (props.show) {
        document.removeEventListener('click', clickListener)
        pageIndex.value = 5
        isMore.value = false
        oldList.value = []
        newList.value = []
        getData()
        getPoitLocation()
    }
})

watch(() => layout.popPosition, (newVal, oldVal) => {
    console.log('监听到show变化', newVal)
    if (newVal) {
        document.removeEventListener('click', clickListener)
        pageIndex.value = 5
        isMore.value = false
        oldList.value = []
        newList.value = []
        getData()
        getPoitLocation()
    }
})



function toBrowser(id: string) {
    window.open("/entity/" + id)
}
async function getData() {
    let token = kline.curCoin.tokenAddress
    let res: any = await get(URL_TOKEN_POSITION.replace("@", token));
    let list = res.data
    list?.forEach((val: any) => {
        val.img = getImg(val.contractAddress)
    })
    list.sort((a: any, b: any) => {
        return b.balance - a.balance
    })
    oldList.value = list
    newList.value = list.slice(0, pageIndex.value);
}
async function getPoitLocation() {
    // const infoDom = document.getElementById('infopot') as HTMLElement
    // const newID = document.getElementById('newID') as HTMLElement
    // const location = infoDom.getBoundingClientRect()
    // console.log('输出位置 #####################', location)
    // await infoDom.appendChild(newID)
    // await nextTick()
    setTimeout(() => {
        document.addEventListener('click', clickListener)
    }, 0)

}
function clickListener(e: any) {
    const newID = document.getElementById('newID') as HTMLElement
    // console.log('newsID', newID)
    // console.log('鼠标点击了', e)
    if (e.target != newID) {
        console.log('触发监听点击')
        newList.value = []
        emit("hide", clickListener);
    }
}
function getImg(address: string) {
    return tokens.getImgByHash(address);
}


function onHide(e:any) {
    console.log('点击关闭')
    emit("hide");
    layout.changePopPosition(false);
    if (e) {
        document.removeEventListener('click', e)
    }
}

async function lookMore() {
    const oldLength = oldList.value.length
    if (pageIndex.value + 5 >= oldLength) {
        pageIndex.value = oldLength
    } else {
        pageIndex.value += 5
    }
    newList.value = oldList.value.slice(0, pageIndex.value);
    const scrollDom = document.getElementById('scroll') as HTMLElement
    if (scrollDom) {
        await nextTick()
        scrollDom.scrollTo({
            top: scrollDom.scrollHeight,
            behavior: "smooth"
        })
    }
}
function bubing() {
    console.log('$###########')
}
</script>
<template>
    <div id="newID" class="tableNews" @click.stop="" :class="{ visible: layout.popPosition }">
        <div class="head" @click.stop="">
            <JHead @onClose="onHide" :text="$t('message.Space.a')">
                <template #icon></template>
            </JHead>
        </div>

        <div class="content">
            <div class="row-head  row-th">
                <div class="row2 head-left">
                    <div>{{ $t('message.Space.b') }}</div>
                </div>
                <div class="row1 text-left">
                    <div>{{ $t('message.Space.c') }}</div>
                </div>
                <div class="row1 head-right">
                    <div>{{ $t('message.Space.d') }}</div>
                </div>
            </div>
            <!-- <JLoding v-if="newList.length == 0"></JLoding> -->
            <div class="row-content" id="scroll" v-if="newList.length > 0">
                <div class="row-head row-line row-td" v-for="item in newList">
                    <div class="row2 head-left d-flex align-center" @click.stop="toBrowser(item.entityId)">
                        <span class="iconfont icon-icon_xinfang"></span>

                        <span class="long-text hover-text">{{ item.entityId }}</span>
                    </div>
                    <div class="row1 text-left">
                        <span>{{ formatBigNumber(Math.abs(item.balance)) }}</span>
                    </div>
                    <div class="row1 head-right">
                        <span>${{ formatBigNumber(item.usd) }}</span>
                    </div>
                </div>
            </div>
            <div class="row-lodding" id="scroll" v-if="newList.length == 0">
                <v-progress-circular :width="3" :size="40" color="#fcc235" indeterminate></v-progress-circular>
            </div>
        </div>
        <div class="bottom" @click.stop="lookMore">
            More
            <span class="arrows">
                <VIcon>mdi mdi-chevron-down</VIcon>
            </span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.hover-text {
    course: pointer;

    &:hover {
        text-decoration: underline;
    }
}

.iconfont {
    margin-right: 4px;
    font-family: "iconfont" !important;
    font-size: 12px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #737B82;
}

.text-left {
    text-align: left;
}

.row-th {
    font-size: 12px;
    font-weight: 400;
    color: #b1b6c6;
}

.row-td {
    font-size: 14px;
    font-weight: 400;
    color: #eaecef;
}

.long-text {
    width: 110px;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.row-line {
    position: relative;

    &::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background-color: #515355;
    }
}

.nesMask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.tableNews {
    position: absolute;
    // position: relative;
    width: 340px;
    // bottom: 184%;

    bottom: 100px;
    right: 100px;
    z-index: 20;

    border-radius: 4px;
    background-color: rgba(54, 59, 67, 0.96);
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    visibility: hidden;

    // &::after {
    //     position: absolute;
    //     content: "";
    //     bottom: -15px;
    //     left: 50%;
    //     transform: translate(-50%, -50%);
    //     width: 0;
    //     height: 0;
    //     border-left: 8px solid transparent;
    //     border-right: 8px solid transparent;
    //     border-top: 10px solid rgba(54, 59, 67, 0.7);
    // }

    :deep(.hd-re) {
        font-size: 16px;
        font-weight: 600;
        color: #eaecef;
    }

    &.visible {
        pointer-events: all;
        visibility: visible;
    }

    .head {
        padding: 4px 5px 4px 5px;
    }

    .bottom {
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--main);
        font-size: 12px;
        font-weight: 400;
        border-top: 1px solid #343a41;
        // cursor: pointer;

        .arrows {
            transform: rotate(0deg);

            &.open {
                transform: rotate(180deg);
            }
        }
    }

    .content {
        display: flex;
        flex-direction: column;

        .row-lodding {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 178px;
        }

        .row-content {
            overflow-y: auto;
            height: 178px;
            scroll-behavior: smooth;
        }

        .row-head {
            display: flex;

            .head-left {
                padding-left: 15px;
            }

            .head-right {
                padding-right: 15px;
                text-align: right;
            }

            .row2 {
                flex: 1.5;
                padding-top: 7px;
                padding-bottom: 7px;
            }

            .row1 {
                flex: 1;
                padding-top: 7px;
                padding-bottom: 7px;

                .row-img {
                    border-radius: 50%;
                    width: 20px;
                    height: 20px;
                    background-color: aquamarine;
                    margin-right: 8px;
                }
            }
        }
    }
}
</style>
